import styled from 'styled-components'
import { Flex, Segmented } from 'antd'
import { useEffect, useState } from 'react'
import classNames from 'classnames'
import List from './List'
import Icon from '../../component/Icon'
import { TeamLevel } from '../../service/interface'
import { teamBaseInfo } from '../../service'
import Message from '../../component/Message'
import { useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { updateInfo } from '../../reducer/userReducer'
import Loading from '../../component/Loading'

const Container = styled.div`
    width: 100%;
    border-radius: 1.5rem 1.5rem 0px 0px;
    display: flex;
    flex-direction: column;
`

const SegmentBox = styled(Flex)`
    width: 100%;
    height: 6.625rem;
    padding: 0 1.5rem 1rem;
    box-sizing: border-box;
`
const Segment = styled(Segmented<TeamLevel>)`
    width: 100%;
    height: 100%;
    color: ${(prop) => prop.theme.text.normal};
    padding: 0;
    overflow: hidden;
    /* background-color: rgba(242, 244, 249, 0.4); */
    background-color: ${(prop) => prop.theme.background.normal};
    .ant-segmented-group {
        gap: 1rem;
    }
    // remove animation --- TODO: remove segment and use other componet
    .ant-segmented-thumb {
        display: none !important;
    }
    .team-segment-item {
        box-shadow: none !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: 500;
        background-color: ${(prop) => prop.theme.background.box};
    }
    .team-segment-item-active {
        color: ${(prop) => prop.theme.text.normal} !important;
        background-color: ${(prop) => prop.theme.background.select};
    }
`

const SegmentItem = styled.div`
    display: flex;
    flex-direction: column;
`

const SegmentItemTop = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    line-height: 1.5rem;
`

const CashBox = styled.div`
    display: flex;
    align-items: center;
    justify-content: start;
    flex: 1;
    margin-bottom: .5rem;
    width: 100%;
`

const SegmentItemBottom = styled.div`
    font-weight: 500;
    font-size: .625rem;
    color: ${(prop) => prop.theme.text.coin};
    min-height: 0;
    line-height: .625rem;
`

const ListBox = styled(List) <{ $active: number }>`
    background-color: ${(prop) => prop.theme.background.box};
    display: ${({ $active }) => $active ? undefined : 'none'};
    border-radius: .625rem;
`
type MenuItemType = { label: string, total: number | string, ton: number | string, key: TeamLevel };
interface Props {
    className?: string;
}

const KYE_TEAM = {
    FIRST: TeamLevel.one,
    SECOND: TeamLevel.two
}

const Content: React.FC<Props> = ({ className }) => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const [loading, setLoading] = useState(false);
    const [current, setCurrent] = useState(KYE_TEAM.FIRST);
    const [hasLoad, setHasLoad] = useState(false);
    const [menu, setMenu] = useState<MenuItemType[]>([]);
    useEffect(() => {
        const fetchData = async () => {
            setLoading(true)
            const res = await teamBaseInfo()
            setLoading(false)
            if (res.data?.inviteUrl) {
                dispatch(updateInfo({ inviteUrl: res.data.inviteUrl }))
            }
            setMenu([
                {
                    key: KYE_TEAM.FIRST,
                    label: `${t('team.level1')}(${res.data?.inviteG1OnlineNum || 0}/${res.data?.inviteG1Num || 0})`,
                    total: Number(res.data?.inviteG1Tol || 0).toFixed(2),
                    ton: Number(res.data?.inviteG1TolTon || 0).toFixed(2)
                },
                {
                    key: KYE_TEAM.SECOND,
                    label: `${t('team.level2')}(${res.data?.inviteG2OnlineNum || 0}/${res.data?.inviteG2Num || 0})`,
                    total: Number(res.data?.inviteG2Tol || 0).toFixed(2),
                    ton: Number(res.data?.inviteG2TolTon || 0).toFixed(2)
                }
            ])
            if (!res.success) {
                Message.error(res.message)
            }
        }
        fetchData()
    }, [dispatch, t])

    const segmentChange = (value: TeamLevel) => {
        setCurrent(value)
        // Loading two lists at the beginning will cause the layout of the react-infinite-scroll-component to be disordered.
        if (value === KYE_TEAM.SECOND) {
            setHasLoad(true)
        }
    }

    return <Container className={className}>
        <SegmentBox
            gap="small"
            align="center"
            vertical
        >
            <Segment
                block={true}
                size="large"
                onChange={segmentChange}
                options={
                    menu.map((e) => ({
                        label: <SegmentItem>
                            <SegmentItemTop>
                                <CashBox>
                                    <Icon
                                        name='icon_coin'
                                        width="1.5rem"
                                    />
                                    &nbsp; {e.total}
                                </CashBox>
                                <CashBox>
                                    <Icon
                                        name='ton_coin'
                                        width="1.5rem"
                                    />
                                    &nbsp; {e.ton}
                                </CashBox>
                            </SegmentItemTop>
                            <SegmentItemBottom>
                                {e.label}
                            </SegmentItemBottom>
                        </SegmentItem>,
                        value: e.key,
                        className: classNames('team-segment-item', {
                            'team-segment-item-active': current === e.key
                        })
                    }))
                }
            />
        </SegmentBox>
        <>
            <ListBox
                $active={current === KYE_TEAM.FIRST ? 1 : 0}
                level={TeamLevel.one}
            />
            {(hasLoad || current === KYE_TEAM.SECOND) && <ListBox
                $active={current === KYE_TEAM.SECOND ? 1 : 0}
                level={TeamLevel.two}
            />}
        </>
        <Loading show={loading} />
    </Container>
}

export default Content